<template>
      <div class="fill-order-warpper">
    <div v-if="addressList&&addressList.length>0" class="address-box clearfix">
      <div class="middle clearfix" v-for="(address ,index) in addressList" :key="index">
        <div class="section-line">收货人：{{address.name}}
          <div class="phone">{{address.phone}}</div>
        </div>
        <div class="address-line">收货地址：<span>{{address.areaCode}}</span></div>
        <div class="action-line">
            <div class="box">
                <a class="flex" href="javascript:;" @click="editAddress(address.id)">
                  <i class="edit"></i>
                  <span>编辑</span>
                </a>
                <a class="flex" href="javascript:;" @click="deleteAddress(address.id)">
                  <i class="del"></i>
                  <span>删除</span>
                </a>
            </div>

        </div>
      </div>
    </div>
    <div v-else class="emptyBox">
       <span>您还没有收货地址，请先添加收货地址</span>
    </div>
    <div class="address-bom">
      <router-link :to="{path:'/AddAdress',query:{userId:$route.query.userId}}">
      添加地址
      </router-link>
    </div>
  </div>
</template>
<script>
  import {
    Tab,
    Group,
    Cell,
    CellBox
     
  } from "vux";
export default {
  components: {
      CellBox,
      Cell,
      Group,
    },
    data () {
      return {
        addressList: []
      }
    },
    mounted(){
       this.fetchAddressList() 
    },
    methods:{
      fetchAddressList() {
          
        this.$axios.post('/device/userAddress/findByUserId').then(res=>{
          if(res.data.code==1000){
              console.log(res)

              this.addressList = res.data.data
          }
        })
      },
      editAddress(id){
          this.$router.push({path: '/Addadress',query:{userId:this.$route.query.userId,adressId:id}})
      },
      deleteAddress(id){
        var self=this

        this.$axios.post('/device/userAddress/delete/'+id).then(res=>{
          if(res.data.code==1000){
              this.$vux.toast.text('删除成功')
               self.fetchAddressList()
          }

        })
      }
    }

}
</script>

<style lang="less" scoped>
.flex{
  float: right;
}
.vux-x-icon {
  fill: #ffab27;
 height: 100px;
}
.fill-order-warpper{
    min-height: 100%;
    width:100%;
    background: #f6f6f6;
    text-align: left;
}
   .product-box {
    display: flex;
    .left {
      flex-grow: 0;
      width: 144px;
      height: 126px;
      position: absolute;
    }
    .right {
      flex-grow: 0;
    }
  }

  .address-box {
    overflow: hidden;
    &:after{
        content: '';
        height:25px;
        background:#f3f5f9;
        width:100%;
        position:absolute;
        bottom: 0;
        left:0;
    }
    .left {
      position: absolute;
      width: 32px;
      height: 36px;
      top: 52px;
      left: 26px;
    }
    .middle {
      // margin-left: 43rem/37.5;
      // margin-right: 33rem/37.5;
      margin-top: 10px;
      overflow: hidden;
      padding-top: 10px;
      background: #fff;
      .section-line {
        padding: 0 15px;
        font-size: 30px;
        color: #444444;
      }
      .address-line{
        padding: 0 15px;
        font-size: 30px;
        margin-top:14px;
        margin-bottom: 14px;
        // padding-right: 20px;
        color: #444444;
        line-height: 46px;
        span{
          // font-size: 12rem/37.5;

        }

      }
      .action-line{
        height: 70px;
        box-sizing: border-box;
        border-top: 1px solid #f3f5f9;
        .box{
          float: right;
          height: 70px;
          line-height: 70px;
          padding-right: 30px;
          font-size: 26px;
        
          a{
            margin-left: 40px;
            line-height: 70px;
            display: flex;
            color: #444444;
            align-items: center;
            i{
              width: 44px;
              height: 48px;
              margin-right: 10px;
              display: block;
              position:relative;
            }
            .edit::after{
              content:"";
              width:40px;
              height:44px;
              display:block;
              position:absolute;
              z-index:2;
              top:0;
              left:0;
              background: url('../assets/bianji.png') no-repeat;
              background-size: 100%;
            }
            .del::after{
              content:"";
              width:40px;
              height:44px;
              display:block;
              position:absolute;
              z-index:2;
              top:0;
              left:0;
              background: url('../assets/shanchu.png') no-repeat;
              background-size: 100%;
            }
          }
        }
      }
      .phone{
        font-size: 28px;
        float: right;
        margin-top: 0;
      }
    }
    .right {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width:44px;
      display: flex;
      align-items: center;
      img {
        width: 16px;
        height: 28px;
      }

    }
  }
  .emptyBox{
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #fff;
    color: #767879;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .emptyBox span{
      padding-right: 20px;
  }
  .address-bom{
    width:80%;
    margin: 100px auto;
    border-radius: 100px;
    height:78px;
    align-items:center;
    background: #feba4e;
    line-height: 78px;
    font-size: 36px;
    color: #fff;
    justify-content: center;
    display: flex;
    z-index: 999;
    a{
         color: #fff;
    }
    // div{
    //     width:465px;
    //     text-align: center;
    //     font-size:32px;
    //     color: #ff4444;
    // }
    // a{
    //     flex: 1;
    //     text-align: center;
    //     background: #ffda44;
    //     height:100%;
    //     line-height: 95px;
    //     font-size:32px;
    //     color: #444444;
    // }
  }
</style>
</style>
